<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

	<link rel="stylesheet"
		href="../../css/bootstrap.min.css" />
	<title><h:outputText value="NP Pillar" /></title>
</h:head>
<h:body>

	<ui:insert name="header">
		<ui:include src="../template/header.xhtml" />
	</ui:insert>
	<script type="text/javascript">
		function handleDrop(event, ui) {
			var droppedCar = ui.draggable;

			droppedCar.fadeOut('fast');
		}
	</script>
	<h:form id="mainForm">
		<p:growl autoUpdate="true" />
		<p:panel
			header="#{sectionControler.editMode? 'Edit Section' : 'Add Section'}">
			<p:tabView id="tabView" orientation="left">
				<p:tab title="Section Image">
					<p:fileUpload fileUploadListener="#{sectionControler.uploadPhoto}"
						mode="advanced" dragDropSupport="false"
						allowTypes="/(\.|\/)(gif|jpe?g|png)$/" update="thumbnail" />
					<p:graphicImage id="thumbnail"
						value="/thumbnail/#{sectionControler.editDto.photoName}"
						width="378" height="550" />
				</p:tab>
				<p:tab title="Section Info">
					<p:panelGrid columns="2">
						<p:outputLabel value="Newspaper:" />
						<p:outputLabel
							value="#{sectionControler.editDto.issue.newspaper.name}" />

						<p:outputLabel value="Issue:" />
						<p:outputLabel
							value="#{sectionControler.editDto.issue.formatIssue}" />

						<p:outputLabel value="Page Number:" />
						<p:outputLabel value="#{sectionControler.editDto.number}"
							rendered="#{sectionControler.editMode}" />
						<p:inputText value="#{sectionControler.editDto.number}"
							required="true" requiredMessage="Page Number is required"
							rendered="#{!sectionControler.editMode}"
							validator="#{sectionControler.sectionNumberValidate}" />

						<p:outputLabel value="Subject:" />
						<p:inputText value="#{sectionControler.editDto.name}" />

					</p:panelGrid>
					<p:remoteCommand name="clearIssue"
						actionListener="#{issueControler.clear}" />
					<p:commandButton value="Save"
						actionListener="#{sectionControler.apply}"
						action="#{mainMenuControler.transfer}"
						onclick="blockui.show();clearIssue()" oncomplete="blockui.hide()">
						<f:setPropertyActionListener
							target="#{mainMenuControler.nextMenu}" value="/faces/issue.jsf" />
					</p:commandButton>
					<p:commandButton value="Cancel"
						actionListener="#{sectionControler.clear}"
						action="#{mainMenuControler.transfer}" onclick="blockui.show()"
						oncomplete="blockui.hide()" immediate="true">
						<f:setPropertyActionListener
							target="#{mainMenuControler.nextMenu}" value="/faces/issue.jsf" />
					</p:commandButton>
				</p:tab>
				<p:tab id="tab" title="Contained Articles">
				<p:fieldset id="articleSet" legend="Contained Articles">
				<p:outputPanel id="articles">
					<p:dataTable id="articleTable"
						selection="#{sectionControler.selectedArticles}"
						value="#{sectionControler.articleListModel}" var="article">
						<f:facet name="header">
							<p:outputLabel value="News Articles" />
						</f:facet>
						<p:column>
							<h:outputText id="dragIcon1" styleClass="ui-icon ui-icon-arrow-4" />
							<p:draggable for="dragIcon1" revert="true" helper="clone" />
						</p:column>
						<p:column headerText="Title" width="20%">
							<h:outputText value="#{article.title}" />
						</p:column>
						<p:column headerText="Subject" width="20%">
							<h:outputText value="#{article.subject.name}" />
						</p:column>
						<p:column headerText="Last Modified Time" width="20%">
							<h:outputText value="#{article.formatTime}" />
						</p:column>
						<p:column headerText="Author" width="20%">
							<h:outputText value="#{article.author.name}" />
						</p:column>
						<p:column style="width:32px">
							<p:commandButton update=":mainForm:articleDetail"
								actionListener="#{sectionControler.startBrowseArticle(article)}"
								icon="ui-icon-search" onclick="PF('articleDialog_w').show()">
							</p:commandButton>
						</p:column>
					</p:dataTable>
					</p:outputPanel>
				</p:fieldset>

					<p:droppable for="articleSet" tolerance="touch"
						activeStyleClass="ui-state-highlight"
						datasource="availableTable" onDrop="handleDrop">
						<p:ajax listener="#{sectionControler.onAddDrop}"
							update="articles availableArticles" />
					</p:droppable>
					<p:droppable for="availableSet" tolerance="touch"
						activeStyleClass="ui-state-highlight" datasource="articleTable"
						onDrop="handleDrop">
						<p:ajax listener="#{sectionControler.onDeleteDrop}"
							update="articles availableArticles" />
					</p:droppable>

					<p:separator />
					<p:fieldset id="availableSet" legend="Available Articles">
					<p:outputPanel id="availableArticles">
						<p:dataTable id="availableTable"
							value="#{sectionControler.availableArticleList}" var="article">
							<f:facet name="header">
								<p:outputLabel value="News Articles" />
							</f:facet>
							<p:column style="width:20px">
								<h:outputText id="dragIcon" styleClass="ui-icon ui-icon-arrow-4" />
								<p:draggable for="dragIcon" revert="true" helper="clone" />
							</p:column>
							<p:column headerText="Title" width="20%">
								<h:outputText value="#{article.title}" />
							</p:column>
							<p:column headerText="Subject" width="20%">
								<h:outputText value="#{article.subject.name}" />
							</p:column>
							<p:column headerText="Last Modified Time" width="20%">
								<h:outputText value="#{article.formatTime}" />
							</p:column>
							<p:column headerText="Author" width="20%">
								<h:outputText value="#{article.author.name}" />
							</p:column>
							<p:column style="width:32px">
								<p:commandButton update=":mainForm:articleDetail"
									oncomplete="PF('articleDialog_w').show()" icon="ui-icon-search">
									<f:setPropertyActionListener value="#{article}"
										target="#{sectionControler.editArticle}" />
								</p:commandButton>
							</p:column>
						</p:dataTable>
						</p:outputPanel>
					</p:fieldset>
				</p:tab>
			</p:tabView>
		</p:panel>
		<p:dialog id="articleDialog" header="Article Detail"
			widgetVar="articleDialog_w" closable="true" modal="true">
			<p:outputPanel id="articleDetail">
				<h:panelGrid columns="2" cellpadding="4">
					<p:outputLabel value="Title:" />
					<h:outputText value="#{sectionControler.editArticle.title}"
						style="font-weight:bold" />

					<p:outputLabel value="Subject:" />
					<h:outputText value="#{sectionControler.editArticle.subject.name}"
						style="font-weight:bold" />

					<p:outputLabel value="Content:" />
					<p:editor value="#{sectionControler.editArticle.html}"
						style="font-weight:bold" disabled="true" />

					<p:outputLabel value="Author:" />
					<h:outputText value="#{sectionControler.editArticle.author.name}"
						style="font-weight:bold" />
				</h:panelGrid>
			</p:outputPanel>
		</p:dialog>
	</h:form>

</h:body>
</html>
